<template> 
  <div class="detail-container">
    <div>
      <el-steps :active="formatStepStatus(order.status)" finish-status="success" align-center>
        <el-step title="下单"></el-step>
        <el-step title="审核"></el-step>
        <el-step title="确认"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </div>
    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger">当前订单状态：{{order.status | formatStatus}}</span>
        <div class="operate-button-container" v-show="order.status===1">
          <el-button size="mini" @click="examineCancel.dialogVisible = true">审核未通过</el-button>
          <el-button size="mini" @click="examineDone">审核通过</el-button>
        </div>
        <div class="operate-button-container" v-show="order.status===2">
          <el-button v-if="order.type==1" size="mini" @click="instockOrder.dialogVisible = true">确认入库</el-button>
          <el-button v-if="order.type==2" size="mini" @click="outstockOrder.dialogVisible = true">确认出库</el-button>
        </div>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="star" style="color: #606266"></svg-icon>
        <span class="font-small">基本信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">订单编号</el-col>
          <el-col :span="6" class="table-cell-title">订单类型</el-col>
          <el-col :span="6" class="table-cell-title">订单备注</el-col>
          <el-col :span="6" class="table-cell-title">项目</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{order.sn}}</el-col>
          <el-col :span="6" class="table-cell">{{order.type | formatType}}</el-col>
          <el-col :span="6" class="table-cell">{{order.project}}</el-col>
          <el-col :span="6" class="table-cell">{{order.note}}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="star" style="color: #606266"></svg-icon>
        <span class="font-small">收货人信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="12" class="table-cell-title">收货人</el-col>
          <el-col :span="12" class="table-cell-title">手机号码</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="table-cell">{{user.nickname}}</el-col>
          <el-col :span="12" class="table-cell">{{user.mobile}}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="star" style="color: #606266"></svg-icon>
        <span class="font-small">元器件信息</span>
        <el-button style="float:right;" type="primary" size="mini" @click="handleExportExcel">导出Excel</el-button>
      </div>
      <el-table
        ref="orderItemTable"
        :data="electronicList"
        style="width: 100%;margin-top: 20px"
        border>
        <el-table-column label="编号" align="center">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" align="center"> </el-table-column>
        <el-table-column prop="package" label="封装" width="120" align="center"> </el-table-column>
        <el-table-column prop="price" label="单价" width="120" align="center"> </el-table-column>
        <el-table-column label="数量" width="120" align="center">
          <template slot-scope="scope">
            <p v-if='scope.row.count > scope.row.stock' style="color:red"> {{scope.row.count}} </p>
            <p v-else> {{scope.row.count}} </p>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="金额" width="120" align="center"> </el-table-column>
        <el-table-column prop="position" label="位置" width="120" align="center"> </el-table-column>
        <el-table-column prop="stock" label="库存" width="120" align="center"> </el-table-column>
      </el-table>
      <div style="float: right;margin: 20px">
        合计：<span class="color-danger">￥{{order.totalAmount}}</span>
      </div>
      <div style="margin-top: 60px">
        <svg-icon icon-class="star" style="color: #606266"></svg-icon>
        <span class="font-small">操作信息</span>
      </div>
      <el-table style="margin-top: 20px;width: 100%"
                ref="orderLogTable"
                :data="logList" border>
        <el-table-column label="操作者" align="center">
          <template slot-scope="scope">
            {{scope.row.user}}
          </template>
        </el-table-column>
        <el-table-column label="操作时间" align="center">
          <template slot-scope="scope">
            {{scope.row.created_time}}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center">
          <template slot-scope="scope">
            {{scope.row.status | formatStatus}}
          </template>
        </el-table-column>
        <el-table-column label="记录" align="center">
          <template slot-scope="scope">
            {{scope.row.log}}
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      title="审核未通过"
      :visible.sync="examineCancel.dialogVisible" width="30%">
      <span style="vertical-align: top">原因备注：</span>
      <el-input
        style="width: 80%"
        type="textarea"
        :rows="5"
        placeholder="请输入内容"
        v-model="examineCancel.content">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="examineCancel.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="examineCancelConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="确认入库"
      :visible.sync="instockOrder.dialogVisible" width="30%">
      <span style="vertical-align: top">备注信息：</span>
      <el-input
        style="width: 80%"
        type="textarea"
        :rows="5"
        placeholder="请输入内容"
        v-model="instockOrder.content">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="instockOrder.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="instockOrderConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="确认出货"
      :visible.sync="outstockOrder.dialogVisible" width="30%">
      <span style="vertical-align: top">备注信息：</span>
      <el-input
        style="width: 80%"
        type="textarea"
        :rows="5"
        placeholder="请输入内容"
        v-model="outstockOrder.content">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outstockOrder.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="outstockOrderConfirm">确 定</el-button>
      </span>
    </el-dialog>

  </div>

</template>
<script>
import {
  getElectronicOrderDetail,
  changeStatusElectronicOrder
} from '@/api/electronicOrder'
import { parseTime } from '@/utils'

export default {
  name: 'orderDetail',
  filters: {
    formatType(value) {
      if (value === 1) {
        return '入库';
      } else if (value === 2) {
        return '出库';
      } else if (value === 3) {
        return '采购';
      }
    },
    formatStatus(value) {
      if (value === 1) {
        return '待审核';
      } else if (value === -1) {
        return '已关闭';
      } else if (value === -2) {
        return '未通过';
      } else if (value === 2) {
        return '待确认';
      } else if (value === 3) {
        return '已完成';
      }
    },
  },
  data() {
    return {
      id: null,
      order: {},
      user: {},
      electronicList: [],
      logList: [],
      instockOrder:{
        dialogVisible:false,
        content:null
      },
      outstockOrder:{
        dialogVisible:false,
        content:null
      },
      examineCancel:{
        dialogVisible:false,
        content:null
      },
      cancelOrder:{
        dialogVisible:false,
        content:null
      },
      commentOrder:{
        dialogVisible:false,
        content:null
      }
    }
  },
  created() {
    this.id = this.$route.query.id;
    getElectronicOrderDetail(this.id).then(response => {
      this.order = response.data.order;
      this.user = response.data.user;
      this.electronicList = response.data.electronicList;
      this.logList = response.data.logList;
      console.log(this.logList)
    });
  },
  methods: {
    formatStepStatus(value) {
      if (value === -2) {
        return 2;
      } else if (value === 1) {
        return 2;
      } else if (value === 2) {
        return 3;
      } else if (value === 3) {
        return 4;
      }else {
        return 1;
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    handleExportExcel() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['名称', '规格', '单位', '数量', '单价', '金额', '库存', '位置']
        const filterVal = ['name', 'package', 'unit', 'count', 'price', 'amount', 'stock', 'position']
        const list = this.electronicList
        const data = this.formatJson(filterVal, list)
        const filename = this.order.sn
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: filename,
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    // 审核取消
    examineCancelConfirm(){
      if (this.examineCancel.content == null || this.examineCancel.content === '') {
        this.$message({
          message: '备注不能为空',
          type: 'warning',
          duration: 1000
        });
        return;
      }
      let params = {
        id:this.id,
        type:this.order.type,
        status:-2,
        content: this.examineCancel.content
      }
      changeStatusElectronicOrder(params).then(response => {
        this.$message(response.message)
        this.$router.push({ path: '/sdc/electronicOrder' })
      });
    },
    // 审核通过
    examineDone() {
      let params = {
        id:this.id,
        type:this.order.type,
        status:2,
        content:"审核通过"
      }
      changeStatusElectronicOrder(params).then(response => {
        this.$message(response.message)
        this.$router.push({ path: '/sdc/electronicOrder' })
      });
    },
    // 确认入库
    instockOrderConfirm() {
      if (this.instockOrder.content == null || this.instockOrder.content === '') {
        this.$message({
          message: '备注信息不能为空',
          type: 'warning',
          duration: 1000
        });
        return;
      }
      let params = {
        id:this.id,
        type:this.order.type,
        status:3,
        receiver_id:this.user.id,
        content: this.instockOrder.content
      }
      changeStatusElectronicOrder(params).then(response => {
        this.$message(response.message)
        this.$router.push({ path: '/sdc/electronicOrder' })
      });
    },
    // 确认出库
    outstockOrderConfirm() {
      if (this.outstockOrder.content == null || this.outstockOrder.content === '') {
        this.$message({
          message: '备注信息不能为空',
          type: 'warning',
          duration: 1000
        });
        return;
      }
      let params = {
        id:this.id,
        type:this.order.type,
        status:3,
        receiver_id:this.user.id,
        content: this.outstockOrder.content
      }
      changeStatusElectronicOrder(params).then(response => {
        this.$message(response.message)
        this.$router.push({ path: '/sdc/electronicOrder' })
      });
    }
  }
}
</script>

<style scoped>
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }

  .color-danger {
    color: red;
  }
</style>

